<template>
  <div class="danciben">
    
  </div>
</template>

<script>
import {fetchData} from './ajax/fetchData.js'
export default {
  name: 'main',
  data () {
      return {
        'query':'',
        'queryHistory':[],
        'hasHistory': true,
        'hasQuery':false,
        'isFromHistory':false,
        'isShowHistory':false,
        'allquery':[],
        'collectArr':[],
        'isShowDanciben':true,
        'curWord':{
         
            'fanyi':['嗨','he'],
            'fayin':'hai',
            'shiyi':[
                "int. 嗨！（表示问候或用以唤起注意）",
                "int. 嗨！（表示问候或用以唤起注意）"
            ],
            'wlfy':[{'en':'hi,how are you','cn':'hi,你好吗'},
            {'en':'hi,how are you','cn':'hi,你好吗'}]
        },
        'test':{"translation":["嗨"],
            "basic":{
              "us-phonetic":"haɪ",
              "phonetic":"haɪ",
              "uk-phonetic":"haɪ",
              "explains":["int. 嗨！（表示问候或用以唤起注意）",
                      "n. (Hi)人名；(柬)希"]
            },
            "query":"hi",
            "errorCode":0,
            "web":[
                {"value":["打招呼","血凝抑制试验(Hemagglutinin Inbitation)","血凝抑制(Hemagglutination Inbition)"],"key":"hi"},
                {"value":["海拉克斯"],"key":"Hi Lux"},
                {"value":["增强接受设定","高阻抗","加强接管设定"],
                "key":"HI GAIN"}
            ]
          }
      }
  },
  mounted() {
  },
  props: {},
  components: {
     
  },
  methods: {
    translate: function(){
      // alert(1);
      if(this.isShowHistory){
        this.isShowHistory=false;
      }
      if(!this.isFromHistory){
        $('.history-item').eq(0).removeClass('history-item-active');
          this.query=$('.input_text').val();
          this.queryHistory.unshift(this.query);
          // alert(this.query);
          // localstroage.setItem('openid','ksjhfkjajkdfjkszdjfksad');
          var queryArr=[];
          if(localStorage.getItem('queryArrL')){
            // console.log('haslo');
            queryArr=localStorage.getItem('queryArrL');
            // console.log(queryArr);
            localStorage.setItem('queryArrL',this.query+'***'+queryArr);
          }else{
            localStorage.setItem('queryArrL',this.query);
          }
      }
      var msg;
      var that=this;
      fetchData(this.query,'',function(result){
          // console.log(result); 
          if(typeof(result)!='object'){
            result=JSON.parse(result);
            console.log(typeof(result));
          }
          msg=result;
          console.log(msg);
           // console.log(JSON.stringify(msg)); 
           that.isFromHistory=false;
            that.hasQuery=true;
            
            // 请求获得数据
            // console.log(msg.translation);
            if(msg.translation&&msg.translation!=''){
              that.curWord.fanyi=msg.translation;
            }else{
              that.curWord.fanyi='';
            }
           
            that.curWord.fayin=msg.basic.phonetic||msg.basic.us-phonetic||msg.basic.uk-phonetic||'';
            if(msg.basic.explains&&msg.basic.explains!=''){
              that.curWord.shiyi=msg.basic.explains;
            }else{
               that.curWord.shiyi='';
            }
            if(msg.web&&msg.web!=''){
              that.curWord.wlfy=msg.web;
            }else{
              that.curWord.wlfy='';
            }
            
      })
      },
    translateH: function(index){
      $('.history-item').eq(index+1).addClass('history-item-active').siblings().removeClass('history-item-active');
      // console.log(text);
      this.query=this.queryHistory[index];
      // alert(this.query);
      this.isFromHistory=true;
      this.translate();
    },
    queryAll:function(){
        $('.history-item').eq(0).addClass('history-item-active').siblings().removeClass('history-item-active');
        if(localStorage.getItem('queryArrL')){
            // console.log('haslo');
            this.isShowHistory=!this.isShowHistory;
            var queryArr=localStorage.getItem('queryArrL');
            queryArr=queryArr.split('***');
            // console.log(queryArr);
            this.allquery=queryArr;
          }else{
              alert('没有历史记录');
          }
    },
    translateFA:function(value){
        this.isShowHistory=false;
        this.query=value;
        this.isFromHistory=true;
        this.translate();
    },
    clearHistory:function(value){
        if(confirm('确定要删除所有记录吗?')){
          localStorage.setItem('queryArrL','');
          this.isShowHistory=false;
        }
    },
    collect:function(){
      // alert($('.collect';
      // if (confirm('确认要收藏吗?')){
        if($('.collect').val()=='收藏'){
           $('.collect').val('已收藏');
           var dancibenB=localStorage.getItem('collectArr');
           localStorage.setItem('collectArr',dancibenB+'***'+this.query);
         }
       
      // }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
  padding: 0;
  margin: 0;
}
*:focus{
  outline: none;
}
.danciben{
  width: 1.5rem;
  height: .9rem;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: .4rem;
  background: white;
}
.cur-shiyi span{
  text-align: left;
  display: block;
  padding:.1rem 0;
}
.main{
  background: #666;
  height: 100%;
  color:white;
  overflow: hidden;
}
.collect{
  float: right;
  color:white;
  font-size: .4rem;
  top: 1.4rem;
  right: .5rem;
  background: white;
  color:black;
  position: absolute;
}
.clear{
  clear: both;
}
.input_text{
  width: 5rem;
  height: 1rem;
  font-size: .4rem;
  border:.1rem solid #888;
  float: left;
}
.cur-wlfy{
  max-height: 2.5rem;
  overflow: scroll;
}
.cur-wlfy p{
  padding: .1rem 0;
}
.translate{
  width: 2.3rem;
  height: 1.2rem;
  font-size: .5rem;
  float: right;
  /*background: #666;*/
  color:black;
  border:none;
  background: #888;
  border-radius: .05rem;
  /*border-bottom: .1rem solid white;*/
  box-sizing: border-box;
}
.allquery{
  max-height: 5rem;
  position: absolute;
  bottom:1rem;
  overflow-y:scroll;
}
.allquery ul{
  width: 7.5rem;
  background: #444;
  border-radius: 1rem;
}
.allquery li{
  text-align: center;
  width: 6rem;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
  font-size: .4rem;
  padding:.3rem;
  margin:0 auto;
}
.cur{
  font-size: .3rem;
  padding:.3rem .3rem;
  background: white;
  width: 6rem;
  margin:.2rem auto;
  color:black;
  border-radius: .1rem;
}
.tishi{
  font-size: .3rem;
  text-align: left;
  padding:.1rem .3rem;
  color:rgba(255,255,255,.7);
}
.cur-name{
  text-align: center;
  width: 3rem;
  background: #666;
  color:white;
  /*position: relative;*/
  top:.2rem;
}
.history{
  /*background: red;*/
  color:black;
  height: 1rem;
  overflow-x:scroll;
  font-size: .5rem !important;
  position: absolute;
  bottom: 0rem;
  line-height: 1rem;
  width: 7.5rem;
  overflow-y: hidden;
}
.history-items{
  background: #fff;
  overflow-x:scroll;
  width: 10rem;

}
.history-item{
  float: left;
  padding:0 .7rem;
  border-top:1px solid #000;
  border-bottom: .1rem solid #fff !important;
}
.history-item-active{
  background: orange;
}
</style>
